<template>
  <div class="flex flex-col">
    <div
      class="flex flex-col justify-center items-center xl:hidden py-4"
      @click="onToggleVisible"
    >
      {{ sectionName }}
    </div>
    <div
      v-show="visible"
      class="flex flex-row justify-start xl:justify-center flex-wrap xl:flex-nowrap"
    >
      <div
        class="h-full py-1 xl:py-4 flex flex-row w-1/2 xl:w-auto justify-center items-center text-lg text-gray-500 xl:px-8 cursor-pointer item"
        :class="[{ active: activeTab && activeTab.tabFlag === tab.tabFlag }]"
        v-for="(tab, idx) in tabArr"
        :key="idx"
        @click="() => onClick(tab)"
      >
        <span>
          {{ tab.title }}
        </span>
      </div>
    </div>
    <div>
      <slot :activeTab="activeTab"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ArtopgroupSimpleTabStruct } from "./index.d.ts";

const props = withDefaults(
  defineProps<{
    sectionName: string;
    tabArr: ArtopgroupSimpleTabStruct[];
  }>(),
  { tabArr: () => [] }
);

const { tabArr } = toRefs(props);
const visible = ref<boolean>(true);
const activeTab = ref<ArtopgroupSimpleTabStruct>();
watch(
  tabArr,
  (newTabArr) => {
    if (newTabArr && newTabArr.length > 0) {
      activeTab.value = newTabArr[0];
    }
  },
  {
    immediate: true,
  }
);
function onClick(tab: ArtopgroupSimpleTabStruct) {
  activeTab.value = tab;
}
function onToggleVisible() {
  visible.value = !visible.value;
}
</script>

<style scoped lang="scss">
.item {
  span {
    display: block;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: black;
      transition: width 0.3s;
    }
  }
  &:hover {
    span {
      &::after {
        width: 100%;
      }
    }
  }
}
.active {
  span {
    &::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: black;
    }
  }
}
</style>
